<template>
  <div>
    <Alert class="last-login-time">
      An info prompt
      <template slot="desc">Last login: {{lastLoginTime}}</template>
    </Alert>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import HeaderNav from '@/components/HeaderNav';
  import { getUserInfo, getProductInfo } from '@/api/index';
  export default {
    name: 'Dashbord',
    components: { HeaderNav },
  	data () {
      return {
        lastLoginTime: ''
      };
    },

    computed:{
      ...mapState([ 'userInfo'])
    },
    created () {
      if(this.userInfo) {
        this.lastLoginTime = this.userInfo.login_time;
      }
    },
    watch: {
      userInfo: function (val) {
        this.lastLoginTime = val.login_time;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .last-login-time .ivu-alert-message {
    padding-bottom: 10px;
    font-size: 16px;
  }
  .last-login-time .ivu-alert-desc {
    font-size: 14px;
  }
</style>
